<template>
  <div class="advertise">
    <div class="top" @click="onJump('https://h5.ele.me/co-branded-card/index.html?channel=card-waimaigui004')">
      <img :src="advertise1" />
    </div>
    <div class="bottom">
      <div class="item" @click="onJump('https://tb.ele.me/wow/alsc/mod/4ef697213f7af5c38c47db5c')"><img
          :src="advertise2" /></div>
      <div class="item" @click="onJump('https://tb.ele.me/wow/alsc/mod/ebdaad749490e267b4455250')"><img
          :src="advertise3" /></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "common-advertise",
  props: {
    title: String,
  },
  data () {
    return {
      advertise1: require("@/assets/img/1330-300.png"),
      advertise2: require("@/assets/img/655-380-2.png"),
      advertise3: require("@/assets/img/655-380-1.png")
    }
  },
  methods: {
    onJump (url) {
      window.open(url, '_blank')
    }
  }
};
</script>

<style lang="less" scoped>
.advertise {
  display: flex;
  flex-direction: column;

  img {
    width: 100%;
    border-radius: 0.4rem;
  }

  .top {
    width: 100%;
    border-radius: 0.2rem;
    margin: 0.2rem 0;
    align-items: center;
    justify-content: center;
    display: flex;
  }

  .bottom {
    display: flex;

    .item {
      background-color: #fff;
      border-radius: 0.2rem;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child {
        margin-right: 0.2rem;
      }
    }
  }
}
</style>
